<template>
  <page-frame>
    <template #header-left>
      <span></span>
    </template>
    <template #header-title>
      <span>个人中心</span>
    </template>
    <template>
      <div class="content">
        <div class="w h-200 f-c a-i-c">
          <div class="">
            <div class="w t-c">
              <i class="el-icon-user p4 r b-f c-i" style="font-size:52px"></i>
            </div>
            <div class="w t-c fs-m-y fs26 m-t5">{{userName}}</div>
            <!-- <div class="f-e a-i-c m-t2">
              <span class="c-s p-r4">EPQC</span>
              <span class="c-w">通富</span>
            </div> -->
          </div>
        </div>
        <div class="w box-b p-l5 p-r5">
          <div class="cell-box">
            <div class="cell-li">修改密码</div>
            <div class="cell-li" @click="loginOut">退出登录</div>
            <div class="cell-li">系统版本</div>
          </div>
        </div>
      </div>
    </template>
  </page-frame>
</template>

<script>
import { tokenName } from '@/server/base.js';
export default {
  props: {
    userName: String,
  },
  data() {
    return {

    }
  },
  methods: {
    loginOut() {
      this.$dialog.confirm({
        title: '提示',
        message: '确认退出吗？',
      }).then(() => {
        // on confirm
        localStorage.removeItem(tokenName);
        window.location.reload()
      }).catch(() => {
        // on cancel
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  background: var(--body-background-color);
  width: 100%;
  height: 100%;

  .cell-box {
    .cell-li {
      background: rgba(255, 255, 255, 0.4);
      padding: 15px;
      font-size: 14px;
      border-radius: 4px;
      border-bottom: 1px solid #e0e0e0;

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
